import { Component } from '@angular/core';
import { ApesField } from './apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { getO } from '../../../../utils/utils';

@Component({
  selector: 'formly-field-textarea',
  template: `
    <textarea apes-input [name]="key"
              [formControl]="formControl"
              [formlyAttributes]="field"
              [disabled]="to.disabled"
              [rows]="rows"
              [cols]="to.cols"
              [apesAutosize]="{ minRows: minRows, maxRows: maxRows }"
              [ngStyle]="style"
              [readonly]="readonly">
    </textarea>
  `,
})
// [class.is-invalid]="showError"
export class FormlyFieldTextArea extends ApesField {
  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  get minRows() {
    return this.to.minRows || 1;
  }
  get maxRows() {
    return this.to.maxRows || 6;
  }
  get readonly() {
    return this.to.readonly;
  }
  get rows() {
    return this.to.rows || 1;
  }
  get style() {
    return this.to.style ? getO(this.to.style) : null;
  }
}
